<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var nsSelect = document.getElementById("namespaceSelect")
            nsSelect.addEventListener('change', function () {
                var selectedNs = this.value
                deployments = getDeployments(selectedNs)
                ingressList = getIngress(selectedNs)
                if (deployments === null) {
                    document.getElementById("deployments").innerHTML = ""
                } else {
                    showDeployments(deployments)
                }
                if (ingressList.length === 0) {
                    document.getElementById("ingresses").innerHTML = ""
                } else {
                    showIngress(ingressList)
                }
            })
        }
        function getDeployments(ns) {
            var xmlhttp = new XMLHttpRequest()
            xmlhttp.open("GET", "/k8s/deployments/get/" + ns, false)
            xmlhttp.setRequestHeader('Content-Type', 'application/json')
            xmlhttp.send()
            if (xmlhttp.readyState === 4) {
                if (xmlhttp.status === 200) {
                    var dep_list_obj = JSON.parse(xmlhttp.responseText);
                    var deployments = dep_list_obj.dep_list
                }
            }
            return deployments
        }
        function showDeployments(deployments) {
            var deploymentsHtml = '';
            if (deployments !== null) {
                deployments.forEach(function (deployment) {
                    deploymentsHtml += '<div>';
                    deploymentsHtml += '<ol>' + deployment + '</ol>';
                    deploymentsHtml += '</div>';
                    document.getElementById("deployments").innerHTML = deploymentsHtml;
                })
            }
        }
        function getIngress(ns) {
            var xmlhttp = new XMLHttpRequest()
            xmlhttp.open("GET", "/k8s/ingress/" + ns, false)
            xmlhttp.send()
            if (xmlhttp.readyState === 4) {
                if (xmlhttp.status === 200) {
                    var ingress_list_obj = JSON.parse(xmlhttp.responseText);
                    var ingresses = ingress_list_obj.ingress_list
                }
            }
            return ingresses
        }
        function showIngress(ingressList) {
            var ingressHtml = '';
            if (ingressList !== null) {
                ingressList.forEach(function (ingress) {
                    ingressHtml += '<div>';
                    ingressHtml += '<ol>' + ingress + '</ol>';
                    ingressHtml += '</div>'
                    document.getElementById("ingresses").innerHTML = ingressHtml
                })
            }
        }
    </script>
</head>
<body>
<div class="header">
    <h1>K8S</h1>
    <button><a href="/">返回</a></button>
</div>
<div class="content">
    <h2>resource</h2>
    <ul>
        <li>
            NameSpace
            <select id="namespaceSelect">
                {{ range .ns_list }}
                <option>{{ . }}</option>
                {{ end }}
            </select>
        </li>
        <li>
            <p>Deployments</p>
            <div id="deployments"></div>
        </li>
        <li>
            <p>Ingress</p>
            <div id="ingresses"></div>
        </li>
    </ul>
</div>
<script>
    var firstNsDeployments = getDeployments(getFirstNs())
    var firstNsIngressList = getIngress(getFirstNs())
    function getFirstNs() {
        var nsRequest = new XMLHttpRequest()
        nsRequest.open("GET", "/k8s/ns", false)
        nsRequest.send()
        var nsList = JSON.parse(nsRequest.responseText)
        var firstNs = nsList.ns_list[0]
        return firstNs
    }
    showDeployments(firstNsDeployments)
    showIngress(firstNsIngressList)
</script>
</body>
</html>